import type { Directive } from 'vue'
import { useAuthStore } from '../store/auth'

const role: Directive = {
  mounted(el, binding) {
    const need = binding.value
    const store = useAuthStore()
    const roles = store.roles || []
    const ok = Array.isArray(need) ? need.some(r => roles.includes(r)) : roles.includes(need)
    if (!ok) el.style.display = 'none'
  },
  updated(el, binding) {
    const need = binding.value
    const store = useAuthStore()
    const roles = store.roles || []
    const ok = Array.isArray(need) ? need.some(r => roles.includes(r)) : roles.includes(need)
    el.style.display = ok ? '' : 'none'
  }
}

export default role